<template>

  <div  >
    <!--查询表单-->
    <el-form :inline="true" :model="maintainQuery" class="demo-form-inline">
      <el-form-item label="保养记录模糊查询：">
        <el-input v-model="maintainQuery.carNo" placeholder="请输入车牌号"></el-input>
      </el-form-item>
      <el-form-item>
        <!--查询按钮-->
        <el-button type="primary" @click="getMaintainList()">查询</el-button>
        <!--重置按钮-->
        <el-button @click="refresh" type="warning">重置</el-button>
        <!--添加违章记录-->
        <el-button @click="goMaintainSave" type="success">新增保养记录</el-button>
        <el-button @click="selectDelete" type="success">选中删除</el-button>
      </el-form-item>
    </el-form>

    <!--违章记录列表-->
    <el-table :data="maintainList" style="width: 100%" :row-class-name="tableRowClassName" @selection-change="checkboxChange">
      <el-table-column type="selection" width="50">
      </el-table-column>
      <el-table-column prop="id" label="Id" width="50">
      </el-table-column>
      <el-table-column prop="carNo" label="车牌号码" width="100">
      </el-table-column>
      <el-table-column prop="text" label="保养类别" width="100">
      </el-table-column>
      <el-table-column prop="mainContent" label="保养内容" width="100">
      </el-table-column>
      <el-table-column prop="mainDate" label="保养时间" width="110">
      </el-table-column>
      <el-table-column prop="nextDate" label="下次保养时间" width="120">
      </el-table-column>
      <el-table-column prop="mainAmount" label="保养费用" width="100">
      </el-table-column>
      <el-table-column prop="unitName" label="保养地点" width="110">
      </el-table-column>
      <el-table-column prop="mainMil" label="此次保养里程" width="100">
      </el-table-column>
      <el-table-column prop="nextMil" label="下次保养里程" width="100">
      </el-table-column>..........,
      <el-table-column prop="name" label="操作人员" width="100">
      </el-table-column>
      <el-table-column prop="remarks" label="备注" width="100">
      </el-table-column>
      <el-table-column label="操作" align="center" width="180">
        <template slot-scope="scope">
          <router-link :to="'/daily_work/maintain_record_update/'+ scope.row.id">
            <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
          </router-link>
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeMaintainById(scope.row.id)">删除</el-button>
        </template>

      </el-table-column>
    </el-table>
    <!--分页-->
    <div class="block">
      <span class="demonstration"></span>
      <el-pagination
        :page-size="limit"
        :current-page="current"
        layout="total, prev, pager, next,jumper"
        :total="total"
        style="padding: 30px 0 ; text-align: center"
        @current-change="getMaintainList" >
      </el-pagination>
    </div>
  </div>

</template>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>

<script>
import maintainApi from "@/api/maintain_cjl_byjl.js";
export default {
  name: "list",
  data() {
    return {
      deleteCheckBox: [],
      current: 1,
      limit: 4,
      maintainQuery: {
      },
      maintainList: null,
      total: 0,

    }
  },
  created() {
    this.getMaintainList();
  },
  methods: {
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    },
    goMaintainSave() {
      this.$router.replace('/daily_work/maintain_record_save')
      // this.$router.push({ path: "/daily_work/driving_licence_save" });
    },
    getMaintainList(current = 1) {
      this.current = current
      maintainApi
        .pageMaintain(this.current, this.limit, this.maintainQuery)
        .then((response) => {
          console.log("获取讲保养记录表成功！");
          this.maintainList = response.data.item;
          this.total = response.data.total;
          console.log(this.maintainList);
          console.log(this.total);
        })
    },

    refresh() {
      this.maintainQuery = {}
      this.getMaintainList()
    },

    removeMaintainById(id) {
      this.$confirm("此操作将永久删除该条记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        maintainApi.removeMaintain(id).then((response) => {
          this.getMaintainList()
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
      })
    },

    checkboxChange(val) {
      console.log("checkbox+++++"+val)
      val.forEach(item => {
        this.deleteCheckBox.push(item.id)
      })
      console.log("选中的checkbox id"+this.deleteCheckBox)
    },

    selectDelete() {
      maintainApi.selectCheckBoxDelete(this.deleteCheckBox).then((response) => {
        this.getMaintainList()
        this.$message({
          type: "success",
          message: "删除成功!",
        });
      })
    }
  }
}
</script>
